<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snowfall</title>
</head>
<body>
	<canvas id="canvasOne" height="400px" width="600px">
			Your browser does not support canvas!
	</canvas>
<script>
	var SHOT_PER_PERIOD = 100;
	var count = 0;
	var rotation_count = 0;
	var enlarge = true;
	//window.addEventListener("load", eventWindowLoaded, false);
	function eventWindowLoaded() {
		var canvas = document.getElementById("canvasOne");
		if (!canvas || !canvas.getContext("2d")) {
			alert("No canvas support");
		} else {
			drawCanvas(canvas.getContext("2d"));
		}
	}
	
	function drawCanvas(ctx) {
		 setTimeout(function(){animateDrawing4PointSnowflake(ctx, 25, 25, 100, "rgba(200, 0, 0, 0.7)")}, 100);
	}
	
	function clearCanvas(ctx) {
		ctx.clearRect(0, 0, 600, 400);
	}
	
	function drawNormalized4PointSnowflake(ctx, x, y, size, color) {
		draw4PointSnowflake(ctx, x, y, size, 0.5, color, 0);
	}
	
	function animateDrawing4PointSnowflake(ctx, x, y, size, color) {
		console.log("count = " + count);
		clearCanvas(ctx);
		draw4PointSnowflake(ctx, x, y, size, count / SHOT_PER_PERIOD, color, 2 * rotation_count / SHOT_PER_PERIOD);
		draw6PointSnowflake(ctx, 175, 25, 100, count / SHOT_PER_PERIOD, color, 2 * rotation_count / SHOT_PER_PERIOD);
		draw8PointSnowflake(ctx, 325, 25, 100, count / SHOT_PER_PERIOD, color, 2 * rotation_count / SHOT_PER_PERIOD);
		rotation_count++;
		if (enlarge) {
			count++;
			if (count == SHOT_PER_PERIOD) {
				enlarge = false;
			}
		} else {
			count--;
			if (count == 0) {
				enlarge = true;
			}
		}
		drawCanvas(ctx);
	}
	
	function draw4PointSnowflake(ctx, x, y, size, thickness, color, rotation) {
		//console.log("in draw4PointSnowflake, thickness = " + thickness);
		if (thickness < 0 || thickness > 1) {
			throw "[draw4PointSnowflake]: Thickness must be value between 0 and 1. Current thickness = " + thickness;
		}
		//ctx.clearRect(x, y, size, size);
		ctx.save();
		ctx.translate(x + 0.5 * size, y + 0.5 * size)
		x = - 0.5 * size;
		y = - 0.5 * size;
		ctx.rotate(rotation * Math.PI);
		ctx.fillStyle = color;
		ctx.beginPath();
		ctx.moveTo(x, y);
		ctx.lineTo(x + 0.5 * size, y + 0.5 * size * (1 - thickness));
		ctx.lineTo(x + size, y);
		ctx.lineTo(x + 0.5 * size * (1 + thickness), y + 0.5 * size);
		ctx.lineTo(x + size, y + size);
		ctx.lineTo(x + 0.5 * size, y + 0.5 * size * (1 + thickness));
		ctx.lineTo(x, y + size);
		ctx.lineTo(x + 0.5 * size * (1 - thickness), y + 0.5 * size);
		ctx.closePath();
		ctx.fill();
		ctx.restore();
	}
	
	function draw6PointSnowflake(ctx, x, y, size, thickness, color, rotation) {
		if (thickness < 0 || thickness > 1) {
			throw "[draw6PointSnowflake]: Thickness must be value between 0 and 1. Current thickness = " + thickness;
		}
		ctx.save();
		ctx.translate(x + 0.5 * size, y + 0.5 * size)
		x = - 0.5 * size;
		y = - 0.5 * size;
		ctx.rotate(rotation * Math.PI);
		ctx.fillStyle = color;
		ctx.beginPath();
		//1.
		ctx.moveTo(x + 0.25 * size, y);
		ctx.lineTo(x + 0.5 * size, y + 0.5 * size * (1 - thickness));
		//2.
		ctx.lineTo(x + 0.75 * size, y);
		ctx.lineTo(x + 0.5 * size + 0.5 * 0.75 * size * thickness, y + 0.25 * size * (2 - thickness));
		//3.
		ctx.lineTo(x + size, y + 0.5 * size);
		ctx.lineTo(x + 0.5 * size + 0.5 * 0.75 * size * thickness, y + 0.25 * size * (2 + thickness));
		//4.
		ctx.lineTo(x + 0.75 * size, y + size);
		ctx.lineTo(x + 0.5 * size, y + 0.5 * size * (1 + thickness));
		//5.
		ctx.lineTo(x + 0.25 * size, y + size);
		ctx.lineTo(x + 0.5 * size - 0.5 * 0.75 * size * thickness, y + 0.25 * size * (2 + thickness));
		//6.
		ctx.lineTo(x , y + 0.5 * size);
		ctx.lineTo(x + 0.5 * size - 0.5 * 0.75 * size * thickness, y + 0.25 * size * (2 - thickness));
		ctx.closePath();
		ctx.fill();
		ctx.restore();
	}
	
	function draw8PointSnowflake(ctx, x, y, size, thickness, color, rotation) {
		if (thickness < 0 || thickness > 1) {
			throw "[draw8PointSnowflake]: Thickness must be value between 0 and 1. Current thickness = " + thickness;
		}
		ctx.save();
		ctx.translate(x + 0.5 * size, y + 0.5 * size)
		x = - 0.5 * size;
		y = - 0.5 * size;
		ctx.rotate(rotation * Math.PI);
		ctx.fillStyle = color;
		ctx.beginPath();
		//1.
		ctx.moveTo(x + 0.5 * size, y);
		//2.
		ctx.lineTo(x + 0.5 * size * (1 + thickness), y + 0.5 * size * (1 - thickness));
		//3.
		ctx.lineTo(x + size, y + 0.5 * size);
		//4.
		ctx.lineTo(x + 0.5 * size * (1 + thickness), y + 0.5 * size * (1 + thickness));
		//5.
		ctx.lineTo(x + 0.5 * size, y + size);
		//6.
		ctx.lineTo(x + 0.5 * size * (1 - thickness), y + 0.5 * size * (1 + thickness));
		//7.
		ctx.lineTo(x, y + 0.5 * size);
		//8.
		ctx.lineTo(x + 0.5 * size * (1 - thickness), y + 0.5 * size * (1 - thickness));
		ctx.closePath();
		ctx.fill();
		ctx.restore();
	}
	
	window.onload = eventWindowLoaded();
</script>
</body>
</html>